<template>
  <a-drawer
    title="入学参考科目详细信息"
    width=650
    placement="right"
    @close="close"
    :closable="false"
    :visible="referenceDetailVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form >
      <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}" >
            <a-form-item >科目码：{{data.kmbm}}</a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" >
            <a-form-item >科目名称：{{data.kmmc}}</a-form-item>
          </a-col>
        <!--  <a-col :sm="{span:12}" :lg="{span:12}" >
            <a-form-item label="科目类型">{{data.kmlx}}</a-form-item>
          </a-col> -->
          <a-col :sm="{span:12}" :lg="{span:12}"  >
            <a-form-item >
            <template v-for="item in data.ssyxm" >
               <template v-for='_item in selectMenu.yx'  v-if='_item.dwh == item'>
                 所属院系：{{_item.dwmc}}
               </template>
             </template>
            </a-form-item>
          </a-col>
      </a-row>
      <a-table
        ref="table"
        size="default"
        rowKey="key"
        bordered
        :columns="columns"
        :dataSource="data.zsSsckkmcksList"
        :pagination="false"
        >
        </a-table>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="close">取消</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { STable } from '~'
import { mapState } from 'vuex'

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
export default {
  props: {
    info: {
      default: () => ({
        kmm: '',
        kmlx: '',
        kmmc: [],
        datas: []
      })
    }
  },
  components: {
    STable
  },
  data () {
    return {
      referenceDetailVisiable: false,
      dateFormat: 'YYYY/MM/DD',
      formItemLayout,
      loading: false,
      data: {
        kmm: '',
        kmlx: '',
        kmmc: [],
        datas: []
      },
      // 表头
      columns: [
        {
          title: '书目名称',
          dataIndex: 'smmc'
        },
        {
          title: '书目作者',
          dataIndex: 'smzz'
        },
        {
          title: '书目出版社',
          dataIndex: 'smcbs'
        },
        {
          title: '出版日期',
          dataIndex: 'cbrq'
        }
      ],
      selectMenu: {
        yx: [] // 院系
      }
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0126: state => state.app['TYPE0126'] // 年级
    })
  },
  watch: {
    info () {
      this.data = this.info
      this.data.ssyxm = this.data.ssyxm.split(',')

    }
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  methods: {
    moment,
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
      })
    },
    // 显示
    show () {
      this.referenceDetailVisiable = true
    },
    // 关闭
    close () {
      this.referenceDetailVisiable = false
    }
  }
}
</script>
